{% extends "geonode_base.html" %}

{% load i18n %}
{% load avatar_tags %}
{% load static from staticfiles %}

{% block title %}{% trans "Message Inbox" %} — {{ block.super }}{% endblock %}

{% block body %}
<div class="row">
  <div class="col-md-12">
    <h2 class="page-title">{%  trans "Messages" %}</h2>
    <div class="row">
      <div class="col-md-12">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#inbox" data-toggle="tab"><i class=""></i>{% trans "Inbox" %}</a></li>
          <li><a href="#all" data-toggle="tab"><i class=""></i> {% trans "All" %}</a></li>
        </ul>


        <div class="inbox-icons">
            <i id=id-mark-as-read class="fa fa-envelope-open" title="{% trans "Mark selected as read" %}"></i>
            <i id=id-mark-as-unread class="fa fa-envelope" title="{% trans "Mark selected as unread" %}"></i>
        </div>

        <script src="{% static "lib/js/jquery.js" %}"></script>
        <script>
            $("#id-mark-as-unread").click(() => {
                $( "#id-action-type" ).attr('value', 'unread');
                $("#id-inbox-form").submit();
            });

            $("#id-mark-as-read").click(() => {
                $( "#id-action-type" ).attr('value', 'read');
                $("#id-inbox-form").submit();
            });
        </script>
        <form method="POST" id="id-inbox-form" action={% url "msg_status" %} >
            {% csrf_token %}
            <input id="id-action-type" name="action_type" type="hidden" value="">
            {% for thread in  threads_all%}
                <input name=thread_{{ thread.pk }} id=read_unread_{{ thread.pk }} type="hidden" value="">
            {% endfor %}
        </form>

            <div class="tab-content">
              <article id="inbox" class="tab-pane active">
                {% with threads_unread as threads %}
                    {% include "user_messages/_message_snippet.html" %}
                {% endwith %}
              </article>
              <article id="all" class="tab-pane">
                {% with threads_all as threads %}
                    {% include "user_messages/_message_snippet.html" %}
                {% endwith %}
              </article>
            </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block sidebar %}
  {% if not READ_ONLY_MODE %}
    <a href="{% url 'message_create' %}" class="btn btn-primary" type="button">{% trans "Create Message" %}</a>
  {% endif %}
{% endblock %}

{% block extra_script %}
{{ block.super }}
<script type="text/javascript">

function prepare_read_unread_form(objectClicked) {
    if (objectClicked.type === 'checkbox') {
        $("#read_unread_" + objectClicked.name.split("_")[1])[0].value = objectClicked.checked;
    }
}

$('.tab-content').click(function(event) {
  const objectClicked = event.target;
  prepare_read_unread_form(objectClicked)

  // If we clicked the delete button
  if ($(objectClicked)[0].className.indexOf('message_delete_btn') >= 0) {
    // Grab the correct form
    form = $(objectClicked).closest('form')[0];
    // Asynchronous delete thread and refresh on same page
    $.ajax({
      type: "POST",
      url: $(form).attr('action'),
      data: $(form).serialize(),
      success: function() {
        $('#all').load(window.location.pathname + ' #all');
        $('#inbox').load(window.location.pathname + ' #inbox');
      }
    });
    return false;
  }
});
// Allow thread links to work
$('.tab-content a').click(function(event) {
  event.stopPropagation();
});
</script>
{% endblock extra_script %}
